import React, { useState } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import {
  Breadcrumb,
  Button,
  Checkbox,
  Form,
  Input,
  Layout,
  Menu,
  theme,
  Modal,
} from "antd";
import { Homerouter } from "../../router/Index";
import { useNavigate, Outlet } from "react-router-dom";
import http from "../../api/axiosapi";
import type { FormProps } from "antd";
import I18nqh from "../../components/I18nqh";
import Huanf from "../../components/Huanf";
import { useTranslation } from "react-i18next";
const { Header, Content, Footer, Sider } = Layout;
type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}
function Index() {
  const { t } = useTranslation();
  const funarr = (arr) => {
    return arr.map((item) => {
      return {
        key: item.path,
        // label: (item.label),
        label: t(`${item.label}`),
        icon: item.icon,
        children: item.children ? funarr(item.children) : null,
      };
    });
  };

  const items = funarr(Homerouter);
  const navget = useNavigate();

  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  type FieldType = {
    account?: string;
    password?: string;
    remember?: string;
  };
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish: FormProps<FieldType>["onFinish"] = async (values) => {
    const res = await http.post("/api/login", values);
    console.log(res);
    if (res.status == 200) {
      localStorage.setItem("token", res.data.token);
      localStorage.setItem("userId", res.data.userId);
      localStorage.setItem("username", res.data.username);
      setIsModalOpen(false);
    }

    console.log("Success:", values);
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div>
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["1"]}
            mode="inline"
            items={items}
            onClick={({ key }) => navget(key)}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }}>
            <div style={{display:'flex',alignItems:'center'}} >
              <I18nqh></I18nqh>
              <Huanf></Huanf>
              <Button type="primary" onClick={showModal}>
                登录
              </Button>
              <Modal
                title="欢迎您的使用"
                closable={{ "aria-label": "Custom Close Button" }}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
              >
                <Form
                  name="basic"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  style={{ maxWidth: 600 }}
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item<FieldType>
                    label="用户名"
                    name="account"
                    rules={[{ required: true, message: "用户名不能为空!" }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item<FieldType>
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: "密码不能为空!" }]}
                  >
                    <Input.Password />
                  </Form.Item>

                  <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                      Submit
                    </Button>
                  </Form.Item>
                </Form>
              </Modal>
            </div>
          </Header>
          <Content style={{ margin: "0 16px",}}>
            <Breadcrumb
              style={{ margin: "16px 0" }}
              items={[{ title: "User" }, { title: "Bill" }]}
            />
            <div
              style={{
                padding: 24,
                minHeight: 360,
                // background: colorBgContainer,
                borderRadius: borderRadiusLG,
                background:'var(--color-beijinys)'
                
              }}
            >
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </div>
  );
}

export default Index;
